<template>
    <view class="container">
        <view class="list-cell b-b m-t" @click="navTo('个人资料')" hover-class="cell-hover" :hover-stay-time="50">
            <text class="cell-tit">个人资料</text>
            <text class="cell-more yticon icon-you"></text>
        </view>
        <view class="list-cell b-b" @click="navTo('收货地址')" hover-class="cell-hover" :hover-stay-time="50">
            <text class="cell-tit">收货地址</text>
            <text class="cell-more yticon icon-you"></text>
        </view>
        <view class="list-cell" @click="navTo('实名认证')" hover-class="cell-hover" :hover-stay-time="50">
            <text class="cell-tit">实名认证</text>
            <text class="cell-more yticon icon-you"></text>
        </view>

        <view class="list-cell m-t">
            <text class="cell-tit">消息推送</text>
            <switch checked color="#fa436a" @change="switchChange" />
        </view>
        <view class="list-cell m-t b-b" @click="navTo('清除缓存')" hover-class="cell-hover" :hover-stay-time="50">
            <text class="cell-tit">清除缓存</text>
            <text class="cell-more yticon icon-you"></text>
        </view>
        <view class="list-cell m-t b-b" @click="navTo('关于我们')" hover-class="cell-hover" :hover-stay-time="50">
            <text class="cell-tit">关于我们</text>
            <text class="cell-more yticon icon-you"></text>
        </view>
        <view class="list-cell">
            <text class="cell-tit">检查更新</text>
            <text class="cell-tip">当前版本 1.0.3</text>
            <text class="cell-more yticon icon-you"></text>
        </view>
        <view class="list-cell log-out-btn" @click="toLogout">
            <text class="cell-tit">退出登录</text>
        </view>
        <view>wode: {{ userStore.userInfo }},{{ userStore.isLogin() }}</view>
    </view>
</template>

<script setup>
// import { userInfoStore } from '/store';
// const userStore = userInfoStore();

// const setUserInfo = () => {
//     userStore.setUserInfo({
//         nickname: '昵称SAA'
//     });
// };
// 引入 pinia 状态管理
import { userInfoStore } from '/store';
const userStore = userInfoStore();
// 获取全局变量的引用
const instance = getCurrentInstance();
const gProperties = instance.appContext.config.globalProperties;
// let login = userStore.hasLogin();
// console.log(login);

const navTo = (url) => {
    gProperties.$api.msg(`跳转到${url}`);
};
const toLogout = () => {
    uni.showModal({
        content: '确定要退出登录么',
        success: (e) => {
            if (e.confirm) {
                userStore.logout();
                setTimeout(() => {
                    uni.navigateBack();
                }, 200);
            }
        }
    });
};

const switchChange = (e) => {
    let statusTip = e.detail.value ? '打开' : '关闭';
    gProperties.$api.msg(`${statusTip}消息推送`);
};
</script>

<style lang="scss" scoped>
page,
.container{
    background: $page-color-base;
    width: 750rpx;
}
.list-cell {
    display: flex;
    align-items: baseline;
    padding: 20rpx $page-row-spacing;
    line-height: 60rpx;
    position: relative;
    background: #fff;
    justify-content: center;
    &.log-out-btn {
        margin-top: 40rpx;
        .cell-tit {
            color: $uni-color-primary;
            text-align: center;
            margin-right: 0;
        }
    }
    &.cell-hover {
        background: #fafafa;
    }
    &.b-b:after {
        left: 30rpx;
    }
    &.m-t {
        margin-top: 16rpx;
    }
    .cell-more {
        align-self: baseline;
        font-size: $font-lg;
        color: $font-color-light;
        margin-left: 10rpx;
    }
    .cell-tit {
        flex: 1;
        font-size: $font-base + 2rpx;
        color: $font-color-dark;
        margin-right: 10rpx;
    }
    .cell-tip {
        font-size: $font-base;
        color: $font-color-light;
    }
    switch {
        transform: translateX(16rpx) scale(0.84);
    }
}
</style>
